<script setup>
/**
 * @name 字幕特效设置
 */
import baseModel from "@/components/baseModel/baseModel.vue";
// base弹窗
const dialog = ref(null);

import { ref, reactive, onMounted, computed, nextTick } from "vue";

const emit = defineEmits(["updateEffect_config:effect_config"]);

import request from "@/common/utils/request";

import {getSubtitleEffect_config} from '@/views/shotstack/MixedCutPlatforms/utools/template.js'

const state = reactive({
    activeKey: '',
    // 特效列表
    list: [],
    // effect_config
    effect_config:getSubtitleEffect_config()
})

// 一一对应的key
const key = {
    '入场特效': 'AaiMotionInEffect',
    '出场特效': 'AaiMotionOutEffect',
    '循环特效': 'AaiMotionLoopEffect',
}

// 数据回显
const resetData = () => {
    // 数据回显
    for (let keyName in state.effect_config) {
        const item = state.effect_config[keyName]
        if (item.value.length) {
            let editKeyName
            for (let i in key) {
                if(key[i] === keyName) {
                    editKeyName = i
                    break;
                }
            }
            const listItem = state.list.find(ele => ele.name === editKeyName)
            if(listItem) {
                listItem.subtitle_effects_group_detail.forEach(ele => {
                  ele.checked =  item.value.includes(ele.value)
                })
            }

        }
    }
}

// 获取特效列表
const getSubtitleEffectsList = async () => {
    const res = await request.get("work_ai",
        "/user/shotstack/producing/subtitleEffectsList"
      );

    console.log(res, '特效列表');
    state.list = res?.result || []
    if (state.list.length) {        
        const item = state.list?.[0]
        item && (state.activeKey = `${item?.id}_${item?.name}`)
        resetData()
    }
}

// 勾选
const select = (son, parent) => {
    const editItem = state.effect_config[key[parent.name]]
    // 开启循环 不做处理
    if(editItem.isRandom) return
    son.checked = !son.checked
    editItem.value = parent.subtitle_effects_group_detail.filter(ele => ele.checked).map(ele => ele.value)
    console.log(editItem,'勾选变化了');
}

// 清空已选择的项
const clearData = (key_name) => {
    const editItem = state.effect_config[key[key_name]]
    const findItem = state.list.find(ele => ele.name === key_name)
    if(findItem && editItem) {
        findItem.subtitle_effects_group_detail.forEach(ele => ele.checked = false) 
        editItem.value = []
    }
    console.log(editItem, findItem,  '清空了选择的项');
}

const submit = () => {
    console.log(state.effect_config,'提交');
    
    emit('updateTextEffect_config', state.effect_config)
    dialog.value.closeModal();
}

const showModal = (params={}) => {
    const {subtitle_effects} = params
    state.effect_config = JSON.parse(JSON.stringify(subtitle_effects || getSubtitleEffect_config()))
    dialog.value.showModal();
    console.log(state.effect_config, '字幕特效配置 ');
    !state.list.length && getSubtitleEffectsList()
};

const closeModal = () => {
    dialog.value.closeModal();
}

defineExpose({
    open:showModal,
    close:closeModal,
});
</script>

<template>
    <div>
        <baseModel ref="dialog" :contentWidth="'1050px'" :maskClosable="false" :centered="true" :closable="true" :zIndex="1001">
            <template #title>
                    <span class="title">字幕特效</span>
            </template>
            <template #content>
                <div class="content">

                    <div class="self_selects">
  

                        <div class="effects_box">
                            <div class="top_tips_box">
                                <span class="top_tips_title">注意</span>
                                <p class="tips_text">1. 出场入场特效和循环特效不可同时使用</p>
                                <p class="tips_text">2. 同时设置了出场入场特效和循环特效, 循环特效将会失效</p>
                            </div>

                            <a-tabs v-model:activeKey="state.activeKey">
                                <a-tab-pane v-for="item in state.list" :key="`${item?.id}_${item?.name}`" :tab="item.name">

                                <div class="is_top_title">
                                    <div class="title_left">
                                        <div class="title_text_box">
                                            <span class="title_text_style">开启随机</span>
                                            <a-switch  v-model:checked="state.effect_config[key[item.name]].isRandom" />
                                        </div>

                                        <span class="dec_text">
                                            开启后本镜头组将随机选择下面特效，无需手动选择。
                                        </span>
                                    </div>

                        <div class="title_right">
                            <a-button @click="clearData(item.name)" size="small">清空选择</a-button>
                        </div>
                    </div>

                    <div class="line_box"></div>

                    <div class="title_left">
                        <div class="title_text_box">
                            <span class="title_text_style">手动选择 <span v-show="!state.effect_config[key[item.name]].isRandom">(已选: {{ item.subtitle_effects_group_detail.filter(ele => ele.checked).length }})</span></span>
                        </div>
                        <span class="dec_text">
                            将从手动选择的特效里随机
                        </span>
                    </div>
                    <div class="list_box">
                        <div class="list_item" v-for="ele in item.subtitle_effects_group_detail" :key="ele.id" @click.stop="select(ele, item)">
                            <a-checkbox v-show="!state.effect_config[key[item.name]].isRandom" class="is_checkbox" v-model:checked="ele.checked" />
                                <img :src="ele.url" alt="">
                                    <span>
                                    {{ ele.name }}
                                    </span>
                            </div>
                        </div>
                    </a-tab-pane>
                </a-tabs>
            </div>

                    </div>

                </div>
            </template>
            <template #footer>
                <div class="bottom">
                    <a-button @click="closeModal" type="">取消</a-button>
                    <a-button @click="submit" type="primary">确定</a-button>
                </div>
            </template>
        </baseModel>
    </div>
</template>

<style lang="less" scoped>

.content{

    .title{
        font-size: 14px;
    }

    .title_text_style{

        font-size: 14px;
        font-weight: 600;

    }

    // 公用样式单独提取出来
    .title_left{
            display: flex;
            flex-direction: column;
        margin-bottom: 10px;
            .title_text_box{
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 3px;
            }
            .dec_text{
                font-size: 14px;
                color: #999;
            }
        }

    .is_top_title{
        display: flex;
        justify-content: space-between;
    }

    .line_box{
        height: 1px;
        background-color: #eee;
        margin: 10px 0;
    }

    // 自选特效
    .self_selects{

        .effects_box{
            margin-top: 10px;

            .top_tips_box{
                .top_tips_title{
                    position: relative;
                    font-weight: bold;
                    &::before{
                        content: '*';
                        position: absolute;
                        left: -10px;
                        top: -5px;
                        color: red;
                        font-size: 14px;
                }
                }
                .tips_text{
                    margin: 0;
                    font-size: 14px;
                    color: #999;
                }
            }

            .list_box{
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                height: 400px;
                overflow-y: auto;
                &::-webkit-scrollbar {
                    width: 8px; /* 滚动条的宽度 */
                    height: 10px; /* 滚动条的高度，垂直滚动条可能用得上 */
                }
                &::-webkit-scrollbar-thumb {
                    background: #cecece; /* 滑块的背景颜色 */
                    border-radius: 10px; /* 滑块的圆角 */
                }
                .list_item{
                    display: flex;
                    flex-direction: column;
                    gap: 5px;
                    position: relative;
                    cursor: pointer;
                    img{
                        object-fit: cover;
                        height: 135px;
                        width: 240px;
                    }

                    .is_checkbox{
                        position: absolute;
                        right: 5px;
                        top: 5px;
                    }
                }
            }
        }

    }
}

</style>